<template>
  <div>
    <span>菜单一功能组件</span>
    <div>
      <span>菜单名称: {{ menuName }}</span>
    </div>
    <div>
      <span>菜单值: {{ menuValue }}</span>
    </div>
    <button @click="shouChild1But">显示子组件</button>
    <Menu1Child v-if="shouChild1" :par="parentData" @childFn="parentFn" />
    <div>
      <span v-if="!!childValue && !shouChild1">
        子组件来值:{{ childValue }}
      </span>
    </div>
    <div>
      <span>element字体</span>
      <br />
      <span>
        <i
          :class="{
            'el-icon-star-on': isAttention,
            'el-icon-star-off': !isAttention,
          }"
          @click="setAttention"
        ></i>
      </span>
    </div>
  </div>
</template>
<script>
import Menu1Child from "./menu1Child";
export default {
  name: "menu1",
  components: {
    Menu1Child,
  },
  data() {
    return {
      menuName: "",
      menuValue: "",
      shouChild1: false,
      parentData: "快把我接住",
      childValue: "",
      isAttention: true,
    };
  },
  created() {
    //   this.init();
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.menuName = this.$store.state.menuName;
      this.menuValue = this.$store.state.menuValue;
    },
    shouChild1But() {
      // this.shouChild1 = !this.shouChild1;
      this.shouChild1 = true;
    },
    parentFn(obj) {
      // 子组件提交事件
      console.log(obj);
      this.childValue = obj.message;
      this.shouChild1 = obj.isShow;
    },
    exeChildFun() {
      return "你来调用啦";
    },
    setAttention() {
      this.isAttention = !this.isAttention;
    },
  },
};
</script>
<style scoped>
.el-icon-star-on {
  color: yellow;
}
</style>
